<!-- 页面  -->
<template>
  <s-layout title="全部评价">
    <su-tabs
      :list="tabMaps"
      :scrollable="false"
      @change="onTabsChange"
      :current="state.currentTab"
    ></su-tabs>
    <view class="ss-m-t-20">
      <view class="list-item" v-for="item in state.pagination.data" :key="item">
        <comment-item :item="item"></comment-item>
      </view>
    </view>
    <s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </s-layout>
</template>

<script setup>
  import mall from '@/mall';
  	import {
		getReplyList,
		getReplyConfig
	} from '@/mall/api/store.js';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { computed, reactive } from 'vue';
  import _ from 'lodash';
  import commentItem from '../components/detail/comment-item.vue';

  const tabMaps = ref([
    {
      name: '全部',
      value: 0,
    },
    {
      name: '好评',
      value: 1,
    },
    {
      name: '中评',
      value: 2,
    },
    {
      name: '差评',
      value: 3,
    },
  ]);
  const pagination = {
    data: [],
    page: 1,
    total: 1,

  };
  const state = reactive({
    list: [],
    type: [],
    currentTab: 0,
    pagination: {
      data: [],
      page: 1,
      total: 1,
  
    },
    productId: 0,
    type: 0,
  });
  // 切换选项卡
  function onTabsChange(e) {
    state.pagination = pagination;
    state.currentTab = e.index;
    state.type = e.value;
    getList(state.productId, e.value);
  }
  async function getcount(id) {
    const { data } = await getReplyConfig(id);
    state.type = data;
    tabMaps.value[0].name = `${tabMaps.value[0].name}(${data.sumCount})`;
    tabMaps.value[1].name = `${tabMaps.value[1].name}(${data.goodCount})`;
    tabMaps.value[2].name = `${tabMaps.value[2].name}(${data.inCount})`;
    tabMaps.value[3].name = `${tabMaps.value[3].name}(${data.poorCount})`;
  }
  async function getList(id, type=0, page = 1, list_rows = 6) {
    state.loadStatus = 'loading';
    let res = await getReplyList(id, {
      type,
      limit:list_rows,
      page,
    });
      let orderList = _.concat(state.pagination.data, res.data.list);
      state.pagination = {
        ...res.data,
        data: orderList,
      };
      if (state.pagination.page < state.pagination.totalPage) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
  }
  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getList(state.productId, state.code, state.pagination.page + 1);
    }
  }
  onLoad((options) => {
    state.productId = options.id;
    getcount(state.productId);
    getList(state.productId);
  });
  // 上拉加载更多
  onReachBottom(() => {
    loadmore();
  });
</script>

<style lang="scss" scoped>
  .list-item {
    padding: 32rpx 30rpx 20rpx 20rpx;
    background: #fff;
    .avatar {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
    }
    .nickname {
      font-size: 26rpx;
      font-weight: 500;
      color: #999999;
    }
    .create-time {
      font-size: 24rpx;
      font-weight: 500;
      color: #c4c4c4;
    }
    .content-title {
      font-size: 26rpx;
      font-weight: 400;
      color: #666666;
      line-height: 42rpx;
    }
    .content-img {
      width: 174rpx;
      height: 174rpx;
    }
    .cicon-info-o {
      font-size: 26rpx;
      color: #c4c4c4;
    }
    .foot-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #999999;
    }
  }

  .btn-box {
    width: 100%;
    height: 120rpx;
    background: #fff;
    border-top: 2rpx solid #eee;
  }
  .tab-btn {
    width: 130rpx;
    height: 62rpx;
    background: #eeeeee;
    border-radius: 31rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    border: 1px solid #e5e5e5;
    margin-right: 10rpx;
  }
</style>
